<template>
  <view class="tabbar">
    <u-tabbar v-bind="$attrs" :value="tabStore.tabName" activeColor="#050463" inactiveColor="#727272" :border="false" zIndex="6666">
      <u-tabbar-item
        v-for="(item, index) in tabStore.roleTabs"
        :key="index"
        :text="item.text"
        :icon="index == tabStore.tabName ? item.selectedIconPath : item.iconPath"
        :name="index"
        @click="handleTab(item, index)"
      ></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script lang="ts">
export default {
  inheritAttrs: false,
};
</script>
<script setup lang="ts">
import { watch, ref, reactive, computed, toRaw } from 'vue';
import useTabs from '@/lib/store/tab';
import { onLoad } from '@dcloudio/uni-app';
import _ from 'lodash';
const tabStore = useTabs();
const props = defineProps({
  tabIndex: { type: Number }, // 解决switchtab没有切换下面tab标识
});
onLoad(() => {
  if (_.isNumber(props.tabIndex)) {
    tabStore.tabName = props.tabIndex;
  }
});


function handleTab(val: any, index: number) {
  console.log('tab switch to =====', val.pagePath);
  tabStore.tabName = index;
  uni.switchTab({
    url: val.pagePath,
    fail: () => {
      uni.redirectTo({
        url: val.pagePath,
      });
    },
  });
}
</script>

<style lang="scss" scoped>
.tabbar {
}
</style>
